<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout::common_head(~{::title}, ~{::supplement})">
	<meta charset="UTF-8">
	<title>设备总览</title>
	<script src="../static/js/jquery-3.2.1.min.js"></script>
	<script src="../static/js/semantic.js"></script>
	<link rel="stylesheet" href="../static/css/semantic.css"  />
	<link rel="stylesheet" href="../static/css/icon.css"  />
	<link href="../static/css/ionicons.min.css" rel="stylesheet" />
	<link href="../static/css/main.css" rel="stylesheet" th:href="@{css/main.css}"/>
	<link href="../static/css/pace.css" rel="stylesheet" th:href="@{css/pace.css}"/>
	<th:block th:fragment="supplement">
		<link href="../static/css/lobibox.css" rel="stylesheet" th:href="@{css/lobibox.css}"/>
		<link rel="stylesheet" href="../static/css/jquery.treegrid.css" th:href="@{css/jquery.treegrid.css}">
		<link rel="stylesheet" href="../static/css/jstree-default/style.min.css" th:href="@{css/jstree-default/style.min.css}">
		<script src="../static/js/jstree.min.js" th:src="@{js/jstree.min.js}"></script>
		<script src="../static/js/echarts.min.js" th:src="@{js/echarts.min.js}"></script>
		<!--<script src="http://rapapi.org/rap.plugin.js?projectId=19544&mode=0"></script>-->
		<style type="text/css">
			/*原生button 有个下外边距*/
			.ui.modal .actions > .button {
				margin-bottom: 0;
			}
			.chart-style {
				height: 160px;
			}
			.ui.table.dataTable thead th {
				border-left: 0;
			}
			/*原生a 颜色是蓝色*/
			a{ color: rgba(0, 0, 0, 0.87); }
			#pointPop{
				height: 260px;
				width: 260px;
				overflow-y:auto;
				overflow-x:hidden;
				z-index:20;
				background-color: #E0E0E0
			}
			#pointName{
				width: 220px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			#summaryInformation .ui.labels ,.ui.labels .label {
				/*原生label 有个下边距*/
				margin-bottom: 0px;
			}
			#pointDetailModal .ui.tab.segment {
				height: 450px;
				width: 100%;
				overflow:auto;
				overflow-x:hidden;
				/*原生tab 有个下边距*/
				margin-bottom: 0px;
			}
			#pointDetailModal .ui.buttons {
				/*原生buttons 有个下边距*/
				margin-bottom: 0px;
			}
			#pointDetailModal table.dataTable.no-footer {
				/*原生dataTable 下外边框颜色是#111*/
				border-bottom: 1px solid #DDDDDD;
			}
			#pointDetailModal .ui.three.column.grid {
				margin: -20px 0 0 0;
			}
			#pointDetailModal .ui.three.column.grid .column {
				margin-bottom: 10px;
			}
		</style>
	</th:block>
</head>
<body>
<div id="contextWrap">
	<!--sidebar-->
	<div class="ui sidebar vertical left menu overlay  borderless visible sidemenu inverted  grey" data-color="grey"
		 th:replace="layout::left_menu">
		<a class="item logo" href="index.html">
			<img src="../static/images/logo.png" alt="stagblogo"/><img src="../static/images/thumblogo.png"
																	   alt="stagblogo" class="displaynone"/>
		</a>
		<div class="ui accordion inverted">
			<a class="title item" href="dashboard.html">
				<i class="ion-speedometer titleIcon icon"></i>仪表盘
			</a>
			<a class="title item" href="tab.html">
				<i class="ion-ios-lightbulb titleIcon icon"></i>监控视图
			</a>
			<a class="item active" href="overview.html">
				<i class="ion-ios-world titleIcon  icon"></i>业务概览
			</a>
			<div class="title item">
				<i class="ion-mouse titleIcon icon"></i>设备概览<i class="dropdown icon"></i>
			</div>
			<div class="content">
				<a class="item" href="#">服务器</a>
				<a class="item" href="#">网络设备</a>
				<a class="item" href="#">数据库</a>
				<a class="item" href="#">应用</a>
			</div>
			<a class="title item" href="#">
				<i class="ion-arrow-graph-up-right titleIcon icon"></i>视图展示
			</a>
			<div class="title item">
				<i class="ion-paintbrush titleIcon icon"></i>告警展示<i class="dropdown icon"></i>
			</div>
			<div class="content">
				<a class="item" href="#">告警日历</a>
				<a class="item" href="#">告警列表</a>
			</div>
			<a class="title item" href="#">
				<i class="ion-briefcase titleIcon icon"></i>报表统计
			</a>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>仪表盘1</span>
			<i class="ion-speedometer icon"></i>
			<div class="menu">
				<div class="header">
					仪表盘1
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>监控视图</span>
			<i class="ion-ios-lightbulb icon"></i>
			<div class="menu">
				<div class="header">
					监控视图
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>业务概览</span>
			<i class="ion-ios-world icon"></i>
			<div class="menu">
				<div class="header">
					业务概览
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>设备概览</span>
			<i class="ion-mouse icon"></i>
			<div class="menu">
				<div class="header">
					设备概览
				</div>
				<div class="ui divider"></div>
				<a class="item" href="tab.html">服务器</a>
				<a class="item" href="table.html">网络设备</a>
				<a class="item" href="error.html">数据库</a>
				<a class="item" href="login.html">应用</a>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>视图展示</span>
			<i class="ion-arrow-graph-up-right icon"></i>
			<div class="menu">
				<div class="header">
					视图展示
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>告警展示</span>
			<i class="ion-paintbrush icon"></i>
			<div class="menu">
				<div class="header">
					告警展示
				</div>
				<div class="ui divider"></div>
				<a class="item" href="error.html">告警日历</a>
				<a class="item" href="error.html">告警列表</a>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>报表统计</span>
			<a href="error.html">
				<i class="ion-briefcase icon"></i>
			</a>
		</div>

		<div class="ui divider"></div>

	</div>

	<!--sidebar-->

	<div class="pusher">
		<!--navbar-->
		<div class="navslide navwrap" th:replace="layout::top_nav">
			<div class="ui menu icon borderless grid" data-color="inverted white">
				<a class="item labeled openbtn">
					<i class="ion-navicon-round big icon"></i>
				</a>
				<div class="item ui colhidden">
					<div class="ui icon input">
						<input type="text" placeholder="Search...">
						<i class="search icon"></i>
					</div>
				</div>
				<div class="right menu colhidden">
					<div class="ui dropdown item labeled icon">
						<i class="bell icon"></i> 告警
						<div class="ui red label mini circular">6</div>
						<div class="menu">
							<div class="header">
								紧急告警
							</div>
							<div class="item">
								告警信息1……
								<div class="ui teal left pointing label">1</div>
							</div>
							<div class="item">
								告警信息2……
								<div class="ui label">51</div>
							</div>
							<div class="item">
								告警信息3……
								<div class="ui label">1</div>
							</div>
							<div class="header">
								严重告警
							</div>
							<div class="item">
								<i class="dropdown icon"></i>
								<span class="text">更多</span>
								<div class="menu">
									<div class="item">告警信息……</div>
									<div class="item">告警信息……</div>
								</div>
							</div>
						</div>
					</div>
					<div class="ui dropdown item">
						<img class="ui mini circular image" src="../static/images/0.jpg" th:src="@{images/0.jpg}"
							 alt="label-image"/>
						<div class="menu">
							<a class="item" href="mail.html">注销</a>
						</div>
					</div>
					<a class="item labeled rightsidebar computer only">
						<i class="ion-wrench large icon"></i>工具
					</a>
				</div>
			</div>
		</div>
		<!--navbar-->
		<!--maincontent-->
		<div class="mainWrap navslide">
			<div class="ui equal width left aligned padded grid stackable">
				<!--Site Content-->
				<div class="sixteen wide column">
					<div class="header item">
						<h2><i class="large list layout icon"></i>
							设备总览</h2>
					</div>
					<div class="ui grid" id="summaryInformation">
						<!--<div class="eight wide column" style="margin-top: 20px">
							<h3 style="float: left;margin-bottom: 0px;margin-left: 15px">设备检测：</h3>
							<p style="float: left">
								<span th:text="${stateViewVO.hostStateNum.totalNum}"></span>台设备
								<span th:each="stateNum:${stateViewVO.hostStateNum.stateNum}">
									<i th:class="${(stateNum.name=='严重' ? 'red' : (stateNum.name=='警告' ? 'yellow' : 'green') )} + ' desktop icon'"></i>
									<span th:text="${stateNum.value}"></span>
									<span>&nbsp&nbsp&nbsp&nbsp</span>
								</span>
							</p>
						</div>
						<div class="eight wide column" style="margin-top: 20px">
							<h3 style="float: left;margin-bottom: 0px">监测点检测：</h3>
							<p style="float: left">

								<span th:each="stateNum:${stateViewVO.pointStateNum.stateNum}">
									<i th:class="${(stateNum.name=='严重' ? 'red' : (stateNum.name=='警告' ? 'yellow' : 'green') )} + ' circle icon'"></i>
									<span th:text="${stateNum.value}"></span>
									<span>&nbsp&nbsp&nbsp&nbsp</span>
								</span>
							</p>
						</div>-->
						<div class="sixteen wide column right aligned">
                            <div class="ui basic labels" style="float: right">
                                <div class="ui tag label">
                                    共<span th:text="${stateViewVO.pointStateNum.totalNum}"></span>个监测点
                                </div>
                                <div class="ui label" th:each="stateNum:${stateViewVO.pointStateNum.stateNum}" >
									<i th:class="${(stateNum.name=='严重' ? 'red' : (stateNum.name=='警告' ? 'yellow' : 'green') )} + ' circle icon'"></i>
									<span th:text="${stateNum.value}"></span>
                                </div>
                            </div>
                            <span>&nbsp&nbsp&nbsp&nbsp</span>
                            <div class="ui basic labels" style="float: right">
                                <div class="ui tag label">
                                    共<span th:text="${stateViewVO.hostStateNum.totalNum}"></span>台设备
                                </div>
                                <div class="ui label" th:each="stateNum:${stateViewVO.hostStateNum.stateNum}">
									<i th:class="${(stateNum.name=='严重' ? 'red' : (stateNum.name=='警告' ? 'yellow' : 'green') )} + ' desktop icon'"></i>
									<span th:text="${stateNum.value}"></span>
                                </div>

                            </div>

						</div>
					</div>
					<div class="ui segment"  style=" min-height : 487px;">
						<div id="host_table_dimmer" class="ui inverted dimmer">
							<div class="ui text loader">加载</div>
						</div>
						<span id="select_host" style="display: none" th:text="${hostId}"></span>
						<table  id="host_table" class="tree ui compact very basic fixed single line table center aligned " width="100%">
						</table>
					</div>

					<!--</div>-->
				</div>
                <!--监控点详情弹出框-->
                <div  th:replace="hostdetail::point_detail_page" class="ui large modal"></div>
		</div>
	</div>
	</div>
</div>
<!--modal-->
<div id="new_modal" class="ui tiny modal">
	<i class="close icon"></i>
	<div class="content">
		<div class="ui form">
			<h4 class="ui dividing header">新建组</h4>
			<input type="text" id="new-group-input">
			<div id="new_content" class="field">
			</div>
		</div>
	</div>
	<div id="new_actions" class="actions">
		<div class="ui button deny">取消</div>
		<div class="ui green button approve" id="new_submit">确认</div>
	</div>
</div>

<div id="edit_modal" class="ui tiny modal">
	<i class="close icon"></i>
	<div class="content">
		<div class="ui form">
			<h4 class="ui dividing header">编辑组</h4>
			<input type="text" id="edit-group-input">
			<div id="edit_content" class="field">
			</div>
		</div>
	</div>
	<div id="edit_actions" class="actions">
		<div class="ui button deny">取消</div>
		<div class="ui green button approve" id="edit_submit">确认</div>
	</div>
</div>

<div id="move_modal" class="ui tiny modal">
	<i class="close icon"></i>
	<div class="inline fields content">
		<div id="group_tree"></div>
	</div>
	<div id="move_content" class="actions">
		<div class="ui deny button ">取消</div>
		<div class="ui green approve button" id="move_submit">确认</div>
	</div>
</div>

<div id="del-pop" class="ui custom popup transition hidden">
	<div class="description">是否删除该分组？</div>
	<i class="mini checkmark negative icon "></i>

</div>


<div id="pointPop" class="ui special popup">
	<div class="ui relaxed divided list">
		<div class="item">
			<div class="header" id="pointName"></div>
		</div>
		<div class="item">
			<div class="header" id="pointState"></div>
		</div>
		<div class="item">
			<p class="header">监控项：
			<div class="description">
				<table id="itemData" class="ui very basic compact collapsing celled fixed single line table" style="width: 220px">
				</table>
			</div>
			</p>
		</div>
	</div>
</div>
<th:block th:replace="layout::bottom_script(~{::specialScript})">
	<script src="../static/js/js.cookie.js"></script>
	<script src="../static/js/jquery.nicescroll.min.js"></script>
	<script data-pace-options='{ "ajax": false }' src="../static/js/pace.js"></script>
	<script src="../static/js/main.js"></script>
	<th:block th:fragment="specialScript">
		<script type="text/javascript" src="../static/js/jquery.treegrid.js" th:src="@{js/jquery.treegrid.js}"></script>
		<script src="../static/js/jquery.dataTables.js" th:src="@{js/jquery.dataTables.js}"></script>
		<script src="../static/js/custom-datatable.js" th:src="@{js/custom-datatable.js}"></script>
		<script src="../static/js/notifications.js" th:src="@{js/notifications.js}"></script>
		<script src="../static/js/custom/pointModal.js" th:src="@{js/pointModal.js}"></script>
		<script src="../static/js/assistantTool.js" th:src="@{js/assistantTool.js}"></script>
	</th:block>
</th:block>
<script type="text/javascript">
    $(document).ready(function() {
        var host_table = $("#host_table").DataTable({
            "autoWidth": false,
            "paging": false,
            "ordering": false,
            "initComplete": function () {
                $('#host_table tr:eq(1)').treegrid('expand')
            },
            "drawCallback": function () {//初始化后回调
                $("#host_table").treegrid({
					'initialState': 'collapsed',
//					'saveState': true
//					'expanderTemplate': '<i class="caret right icon"></i>',
//					'expanderExpandedClass': 'down',
//					'expanderCollapsedClass': 'right'
				});
//				if(host_table !== undefined)
//                console.log(host_table.isFirstInit)
				if(host_table !== undefined && !host_table.isFirstInit)
                	$('#host_table tr:eq(1)').treegrid('expand')
                var selectIndex
                $('a.delete').on('click',function (e) {
                    selectIndex = host_table.row($(this).parents('tr')).index();
                    $('#del-pop').on('click', 'i.checkmark', function () {
                        var sourceData = $('#host_table').DataTable().data();
                        $('#host_table_dimmer').dimmer('show')
                        $('#del-pop').removeClass('visible').addClass('hidden')
                        $.ajax({
                            type: 'delete',
                            url: '/ov/group/delete?del_group='+ sourceData[selectIndex].cid,
                            data: {del_group: sourceData[selectIndex].cid},
                            dataType: 'json',
                            success: function(result) {
                                if(result.success) {
                                    host_table.rows().remove()
                                    host_table.rows.add(result.data).draw()
                                    $('#host_table_dimmer').dimmer('hide')
                                } else {
                                    console.error('服务器错误')
                                }
                            },
                            error: function (e) {
                                console.error(e)
                            }
                        })
                    })
                }).popup({
                    popup: $('#del-pop'),
                    position: 'top right',
                    on: 'click'
                })

                $('a.point-detail').parent().popup({
                    onShow: function (module) {

                        var point_id = $(module).find('a').attr('id');
                        $.ajax({
                            type: "get",
                            url: "/brief/point?point_id="+point_id,
                            dataType: "json",
                            success: function (result) {
                                if(result.success) {
                                    var Color = ['red', 'yellow', 'green'];
                                    var data = result.data;

                                    var item_datas=data.item_datas;
                                    var str_item_datas = '';
                                    var myColor = '';
                                    for(var i=0; i<item_datas.length; i++){
                                        if (item_datas[i].with_triggers == true) {
                                            if (item_datas[i].state == "严重") {
                                                myColor = Color[0]
                                            }
                                            if (item_datas[i].state == "警告") {
                                                myColor = Color[1]
                                            }
                                            if (item_datas[i].state == "正常") {
                                                myColor = Color[2]
                                            }
                                        }else {
                                            myColor = ''
                                        }
                                        if(strlen(item_datas[i].item_name) > 30)
                                        {
                                            var item_name = "<td title="+item_datas[i].item_name+"><span>"+item_datas[i].item_name+"</span></td>"
                                        }else {
                                            var item_name = "<td><span>"+item_datas[i].item_name+"</span></td>"
                                        }
                                        if(strlen(item_datas[i].value) > 15)
                                        {
                                            var item_value= "<td title="+item_datas[i].value+"><span class='ui "+myColor+" header'>" +item_datas[i].value+"</span></td>"
                                        }else {
                                            var item_value= "<td><span class='ui "+myColor+" header'>" +item_datas[i].value+"</span></td>"
                                        }
                                        str_item_datas +="<tr>"+item_name+item_value+"</tr>";
                                    }

                                    if (data.state == "正常"){ myColor = Color[2] }
                                    if (data.state == "严重"){ myColor = Color[0] }
                                    if (data.state == "警告"){ myColor = Color[1] }
                                    $("#pointName").html("名称："+data.point_name);
                                    $("#pointState").html("状态：&nbsp&nbsp<div class='ui mini "+myColor+" horizontal label' style='margin-bottom: 0'>"+data.state+"</div>");
                                    $("#itemData").html(str_item_datas);
                                } else {
                                    errorMsg_no_data("监控项 Pop");
                                }
                            },
                            error: function () {
                                errorMsg_no_connect("监控点 Pop");
                            }
                        })

                    },
                    onHidden: function (module) {
                        $("#pointName").html("名称：");
                        $("#pointState").html("状态：&nbsp&nbsp");
                        $("#itemData").html("");
                    },
                    popup: '#pointPop',
                    inline: true,
                    hoverable  : true,
                    position   : 'top center',
                    delay: {
                        show: 1000,
                        hide: 500
                    }
				});

                $('a.point-detail').on('click',function(){
                    var point_id = this.id;
                    getItemsDetail(point_id);
                });
            },
            "createdRow": function (row, data, dataIndex) {
                var hashCode = location.hash;

                //选中
                if(hashCode.substr(1) === data.cid) {
					$(row).css('background-color','#CCFFFF');
                    // TODO:选中tr设置展开显示
				}
                if (data.pid== null) {
                    var tmp='treegrid-'+ data.cid;
                } else {
                    var tmp='treegrid-'+ data.cid +' treegrid-parent-'+ data.pid;
                }
                if (data.cid.substr(0, 1) === 'h')
                    $(row).attr('data-id', data.cid);
                $(row).addClass(tmp)
                $('td', row).eq(0).addClass('left aligned');
                $('td', row).eq(2).addClass('no-padding');
            },
            ajax: {
                url: '/host/overview',
                dataSrc: 'data'
            },
            columns: [
                {
                    "data": null,
                    "width": "50%",
                    "title": "名称",
                    render: function(data, type, row, meta) {
                        if (data.state === "正常") {
                            if (row.type === '组') {
                                return '<i class="green folder icon"></i>' + row.name;
                            } else if(row.type === '监控点') {
                                return '<a href="javascript:void(0)" class="point-detail" id="'+ row.cid.substr(1)+'" data-position="right center"><i class="green circle icon"></i>' + row.name+'</a>';
                            } else {
                                return '<a href="hostDetail?host_id=' + row.cid.substr(1) +'">' +
									'<i class="green desktop icon"></i>' + row.name + '</a>';
                            }
                        } else if (data.state === "严重") {
                            if (row.type === '组') {
                                return '<i class="red folder icon"></i>' + row.name;
                            } else if(row.type === '监控点') {
                                return '<a href="javascript:void(0)" class="point-detail" id="'+ row.cid.substr(1)+'" data-position="right center"><i class="red circle icon"></i>' + row.name+'</span>';
                            } else {
                                return '<a href="hostDetail?host_id=' + row.cid.substr(1) +'">' +
									'<i class="red desktop icon"></i>' + row.name + '</a>';
							}

                        } else if (data.state === "警告") {
                            if (row.type === '组') {
                                return '<i class="yellow folder icon"></i>' + row.name;
                            } else if(row.type === '监控点') {
                                return '<a href="javascript:void(0)" class="point-detail" id="'+ row.cid.substr(1)+'" data-position="right center"><i class="yellow circle icon"></i>' + row.name+'</span>';
                            } else {
                                return '<a href="hostDetail?host_id=' + row.cid.substr(1) +'">' +
                                    '<i class="yellow desktop icon"></i>' + row.name + '</a>';
                            }

                        } else {
                            return '<i class="list green layout icon"></i>' + row.name;
                        }
                    }

                },
                {
                    "data": "type",
                    "width": "20%",
                    "title": "类型",
                },
                {
                    "data": null,
                    "width": "30%",
                    "title": "操作",
                    render: function(data, type, row, meta) {
                        if (row.type === "组") {
                            if(row.cid === 'g0') {
                                return '<div class="ui secondary menu">' +
                                '<a class="right item new" id="'+row.cid+'"> 新建</a></div>';
                            }
                            return '<div class="ui secondary menu">' +
								'<a class="right item new" > 新建</a>' +
								'<a class="item move" > 移动</a>' +
								'<a class="item edit" > 编辑</a>' +
								'<a class="item delete"> 删除</a></div>';
                        } else if (row.type === '监控点') {
                            return '';
                        } else {
                            return '<div class="ui secondary menu"><a class="right item move" id="'+row.pid+'_'+row.cid+'"> 移动</a><a class="item edit" id="'+row.cid+'"> 编辑</a></div>';
                        }
                    }
                },
            ],
        });

        //下拉框事件
        $("#ui_dropdown").change(function(){
            var tmp=$("#ui_dropdown").val()
            host_table.search(tmp).draw();
            //host_table.search("组"+" "+tmp).draw();
        });

        //点击新建事件
        $('#host_table tbody').on('click', '.new', function(e) {
            e.preventDefault();

            var sup_index = host_table.row($(this).parents('tr')).index();
			var sourceData = host_table.data();


			$('#new_modal').modal({
                onApprove: function () {
                    $('#new_submit').addClass('loading')
                    $.ajax({
                        type: "post",
                        url: "/ov/group/create",
                        data: {
                            sup_group: sourceData[sup_index].cid,
                            new_group_name: $('#new-group-input').val()
                        },
                        dataType: "json",
                        success: function (result) {
                            if (result.success) {
                                $('#new_submit').removeClass('loading')
                                host_table.rows().remove()
                                host_table.rows.add(result.data).draw()
								$('#new_modal').modal('hide')
								$('#new-group-input').val('')
                            } else {
                                $('#new_submit').removeClass('loading')
                                $('#move_modal').modal('hide')
                                console.error(result.message)
                            }

                        },
                        error: function (e) {
                            console.error(e)
                        }
                    })
					return false;
                }
			}).modal('show')
        });
        //点击移动事件
        $('#host_table tbody').on('click', '.move', function(e) {
            e.preventDefault();

            function genTreeGroup(group, allGroups) {
                var _group = {};
                allGroups.forEach(function (v, i, a) {
					if(v.name === group) {
					    _group = a.slice(i,i+1)[0];
                    }
                });
                var res = {
                    'text': group,
					'state': {
                        'disabled': !_group.enable,
						'opened': true
					},
					'data': {
                    	'cid': _group.cid,
                    	'pid': _group.pid
					},
					'children': []
                }
                if(_group.group_children.length > 0) {
                    _group.group_children.forEach(function (v, i, a) {
						res.children.push(genTreeGroup(v, allGroups))
                    })
                    return res;
				} else {
                    return res;
				}
			}

            function genTreeHost(groupName, allGroups) {
                var _group = {}
                allGroups.forEach(function (v, i, a) {
                    if (v.name === groupName) {
                        _group = a.slice(i, i + 1)[0]
                    }
                })
                var res = {
                    'text': group,
                    'state': {
                        'disabled': !_group.enable,
                        'opened': true
                    },
                    'data': {
                        'cid': _group.cid,
                        'pid': _group.pid
                    },
                    'children': []
                }
                if (_group.group_children.length > 0) {
                    _group.group_children.forEach(function (v, i, a) {
                        res.children.push(genTreeGroup(v, allGroups))
                    })
                    return res;
                }
                if (_group.host_children.length > 0) {
                    _group.host_children.forEach(function (v) {
                        res.children.push()
                    })
                } else {
                    return res;
                }
            }

            var sourceArr = host_table.data().toArray();
            var moved_index= host_table.row($(this).parents('tr')).index();
            var to_index = moved_index;
            var move_url, disable_group_name;

            if(sourceArr[moved_index].type === '组') {
				move_url = "/ov/group/move"
				disable_group_name = sourceArr[moved_index].name
			} else {
                move_url = "/ov/host/move"
				disable_group_name = ''
			}

			//发送请求 获取树形group结构
            $.ajax({
                type: "get",
                url: "/ov/group/get_tree",
                data: {group_name: disable_group_name},
                dataType: "json",
                success: function (result) {
					if (result.success) {
					    var $group_tree = $('#group_tree')
						$group_tree.data('jstree', false).empty();
                        $group_tree.jstree({
							'core': {
							    'data': genTreeGroup('root', result.data)
							}
						})
						$('#move_modal').modal({
							onApprove: function() {
							    var $submit_btn = $('#move_submit')
								$submit_btn.addClass('loading')
                                var group_ins = $group_tree.jstree(true)
                                var selected_data = group_ins.get_selected(true)[0].data;
                                sourceArr.forEach(function (v,i) {
                                    if(v.cid === selected_data.cid) {
                                        to_index = i;
                                        return
                                    }
                                })

                                //发送请求 移动分组
                                $.ajax({
                                    type: "put",
                                    url: move_url,
                                    data: {
                                        from_group: sourceArr[moved_index].pid,
                                        target_id: sourceArr[moved_index].cid,
                                        to_group: sourceArr[to_index].cid
                                    },
                                    dataType: "json",
                                    success: function (result) {
                                        if(result.success) {

                                            host_table.rows().remove()
                                            host_table.rows.add(result.data).draw()
                                            $submit_btn.addClass('loading')
											$('#move_modal').modal('hide')
                                        } else {
                                            //move action error
                                            $submit_btn.addClass('loading')
                                            $('#move_modal').modal('hide')
                                            console.error('move action error')
                                        }
                                    }
                                })
								return false
							}
						}).modal('show')
						

                    } else {
					    //get group tree error
                        console.error('get group tree error')
                    }
                }
            })
        });

        $('#host_table tbody').on('click', '.edit', function(e) {
            e.preventDefault();
            var select_row = $(this).parents('tr')
            var select_index = host_table.row(select_row).index();
            var sourceData = host_table.data();
            $('#edit_modal').modal({
                onApprove: function () {
                    $('#edit_submit').addClass('loading')
                    $.ajax({
                        type: "post",
                        url: "/ov/group/edit",
                        data: {
                            new_group_name: $('#edit-group-input').val(),
                            old_group_name: sourceData[select_index].name,
							sup_group_id: sourceData[select_index].pid
                        },
                        dataType: "json",
                        success: function (result) {
                            if (result.success) {
                                $('#edit_submit').removeClass('loading')
                                sourceData[select_index].name = result.data.new_group_name;
								host_table.row(select_row).data(sourceData[select_index]).draw();
                                $('#edit_modal').modal('hide')
                                $('#edit-group-input').val('')
                            } else {
                                $('#edit_submit').removeClass('loading')
                                $('#move_modal').modal('hide')
                                console.error(result.message)
                            }

                        },
                        error: function (e) {
                            console.error(e)
                        }
                    })
                    return false;
                }
            }).modal('show')
        });
    });

</script>
</body>
</html>



